<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级科室排序</title>
    <link  href="/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_cont_order.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/bootstrap.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/sweetalert.css?cache=<%=Math.random()%>" >
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont" id="order_first_dept">
        <div class="message_right_cont_container">
            <div class="mes_order_con_change">
                <div class="back_mes_con_ord">
                    <a href="messages_cont_order.jsp"><span class="ui_green_btn">返回</span></a>
                    <p>临床科室</p>
                </div>
                <div class="mes_order_con">
                    <div class="mes_order_tip">操作说明：请拖动对象替换位置，按横排排序.</div>
                    <div class='gbin1-list'>
                        <template v-for="first_dept in first_depts">
                            <span :id="first_dept.deptCode" class="inner_twopage" @click="jump_second_dept(first_dept.deptCode)" v-html="first_dept.deptName"></span>
                        </template>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="mes_order_oper">
                    <button class="ui_white" data-toggle="modal" data-target="#myModal">预览当前排序</button>
                    <button class="ui_red">还原操作</button>
                    <button class="ui_green">保存排序</button>
                    <div name="sort" class="sort"></div>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>
        <%--模态框--%>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <h4 class="modal-title" id="myModalLabel">科室排序预览</h4>
                    </div>
                    <div class="modal-body" >
                        <div class="modal-body_in" id="modal-body_list">
                            <li></li>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/sweetalert-dev.js"></script>
<script src="/js/jquery.sortable.js"></script>
<script src="/js/modal.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#order_first_dept",
        data: {
            first_depts:[],
        },
        methods: {
            preview:function(){
                $('#modal-body_list').empty()
                for(var i=0;i<$('.gbin1-list span').length;i++){
                    $('#modal-body_list').append(
                        '<li>'+$('.gbin1-list span').eq(i).text()+'</li>'
                    )
                }
            },
            restore:function(){
                parent.location.reload();
            },
            jump_second_dept:function(deptCode){
                if(deptCode){
                    locationHerf("order_second_dept",{
                        deptCode:deptCode,
                    });
                }
            },
            save:function(){
                swal({
                        title: "",
                        text: "您确定重新排序吗",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        closeOnConfirm: false,
                        closeOnCancel: false
                    },
                    function(isConfirm){
                        if (isConfirm) {
                            for(var i=0;i<$('.gbin1-list span').length;i++){
                                var deptcode=$('.gbin1-list span').eq(i).attr('id');
                                $("div[name='sort']").append(deptcode);
                                $("div[name='sort']").append('|');
                            };
                            var str=$("div[name='sort']").text();
                            if(str.substring(0)=="\'")
                            {
                                //字符串以"开头，去掉"
                                str=str.substr(1,str.length-1)
                            }
                            if(str.substring(str.length-1)=="\'")
                            {
                                //字符串以"结尾，去掉"
                                str=str.substr(0,str.length-2)
                            }
                            $.ajax({
                                type: 'post',
                                url: "order_first_dept.jsp",
                                data: {
                                    act:'sort_dept',
                                    deptCodes:str,
                                },
                                timeout: 3000,
                                dataType: 'json',
                                success:function (data) {
                                    swal({
                                            title: "",
                                            text: "排序成功",
                                            type: "success",
                                            confirmButtonColor: "var(--color)",
                                            confirmButtonText: "确定",
                                        },
                                        function(){
                                            window.location.reload();
                                        });
                                },
                                error:function (error) {
                                    alert('添加失败');
                                }
                            });
                        } else {
                            <%--swal("未保存");--%>
                            window.location.reload();
                        }
                    });
            }
        },
        ready:function() {
            var self=this;
            $.ajax({
                type: 'POST',
                url: "order_first_dept.jsp",
                data:{
                    act:'first_depts'
                },
                success: function(res) {
                    res = JSON.parse(res);
                    console.log(res);
                    if (res.errcode == 0) {
                        self.first_depts = res.depts;
                        setTimeout (sort,0);
                        function sort(){
                            $('.gbin1-list').sortable().bind('sortupdate');
                        };

                    } else {
                        swal(res.errmsg);
                    }
                }.bind(this),
            });
        }
    });
</script>
